<template>
    <div class="wrapper">
        <el-row>
            <el-col :span="24">
                <common-card>
                    <template #header>
                        <div style="font-family: Roboto-Thin; padding: 20px; color: #fff">
                            <span style="font-size: 20px; display: inline-block; width: 100%; overflow:hidden;">学生列表
							<el-button
                                    style="margin-left: 20px;"
                                    @click="addStudent()"
                                    icon="el-icon-plus"
                                    type="primary"
                                    plain
                                    circle
                                    size="small"
                            >
								</el-button>
                                <el-button type="primary" plain><el-link type="info" :underline="false" href="http://59.110.161.163:8088/student/file
">导出学生表格模板</el-link></el-button>
                                <upload-button text="上传学生表格" @upload="handleUpload"></upload-button>

                            </span>
                            <span style="font-size: 14px; display: inline-block; width: 100%; margin-top: 10px">所有学生</span>
                        </div>
                    </template>
                    <template #main>
                        <el-row style="margin-bottom: 15px" type="flex" align="middle">
                            <el-select v-model="searchClassid" clearable placeholder="班级名称" size="mini"
                                       style="margin-right: 10px" @change="handlesearch">
                                <el-option
                                        v-for="item in options2"
                                        :key="item.value"
                                        :label="item.classname"
                                        :value="item.classid">
                                </el-option>
                            </el-select>
                            <el-input
                                    clearable
                                    size="mini"
                                    @input="handlesearch"
                                    class="tableSearch"
                                    placeholder="学生姓名"
                                    prefix-icon="el-icon-search"
                                    v-model="searchStudentname">
                            </el-input>

                        </el-row>

                        <el-table
                                v-loading="tableLoading"
                                :max-height="height"
                                :data="tableData"
                                stripe
                                style="width: 100%">
                            <el-table-column
                                    prop="studentid"
                                    label="学号">
                            </el-table-column>
                            <el-table-column
                                    prop="studentname"
                                    label="学生姓名">
                            </el-table-column>
                            <el-table-column
                                    prop="phone"
                                    label="电话">
                            </el-table-column>
                            <el-table-column
                                    prop="classname"
                                    label="班级名称">
                            </el-table-column>
                            <el-table-column
                                    prop="majorname"
                                    label="专业名称">
                            </el-table-column>
                            <el-table-column
                                    prop="departmentname"
                                    label="学院名称">
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                                    width="180">
                                <template slot-scope="scope">
                                    <el-button
                                            @click="editStudent(scope.row)"
                                            icon="el-icon-setting"
                                            type="primary"
                                            plain
                                            circle
                                            size="small">
                                    </el-button>
                                    <el-button
                                            @click="deleteStudent(scope.row)"
                                            icon="el-icon-delete"
                                            type="danger"
                                            plain
                                            circle
                                            size="small">
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </common-card>
            </el-col>
        </el-row>
        <add-dialog :dialog-visible="isAdd" :is-edit="isEdit" @closeDialog="isOpenDialog(false)"
                    :student-data="studentData" @fresh="fetchAllClass"/>
    </div>
</template>

<script>
    import CommonCard from '../../components/Cards/CommonCard';
    import addDialog from './addDialog'
    import * as majorManage from '@/api/majorManage';
    import * as college from '@/api/college';
    import * as classManage from '@/api/classManage';
    import * as studentManage from '@/api/studentManage';
    import uploadButton from "./uploadButton.vue";
    import {fileUpload} from '@/utils/upload.js'

    export default {

        name: 'index',
        components: {
            CommonCard,
            addDialog,
            uploadButton
        },
        data() {
            return {
                total: 0,
                currentPage: 1,
                departmentData: {},
                studentData: {},
                searchStudentname: '',
                searchClassid: '',
                search: '',
                tableLoading: true,
                height: '',
                isAdd: false,
                isEdit: false,
                tableData: [],
                options: [],
                options2: []
            }
        },
        methods: {
            async handleUpload(formData) {
                await fileUpload('/student/file', {formData})
                this.$notify({
                    title: '信息',
                    type: 'success',
                    message: '上传成功!'
                });
                await this.fetchAllClass();
            },
            async handlesearch() {
                let req = {};
                if (this.searchStudentname && this.searchClassid) {
                    req = {
                        studentname: this.searchStudentname,
                        classid: this.searchClassid
                    }
                } else if (!this.searchStudentname && this.searchClassid) {
                    req = {
                        classid: this.searchClassid
                    }
                } else if (this.searchStudentname && !this.searchClassid) {
                    req = {
                        studentname: this.searchStudentname,
                    }
                }
                const res = await studentManage.fetchStudentByCondition(req);
                this.tableData = res.msg;
            },
            async deleteStudent(data) {
                console.log(data);
                try {
                    await this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    });
                    await studentManage.deleteStudent(data.studentid);
                    this.$notify({
                        title: '信息',
                        type: 'success',
                        message: '删除成功!'
                    });
                    await this.fetchAllClass();
                } catch (e) {
                    console.log(e)
                }
            },
            async fetchAllClass() {
                try {
                    this.tableLoading = true;
                    const res = await studentManage.fetchStudentByCondition({});
                    console.log(res.msg)
                    this.tableData = res.msg;
                } catch (e) {
                    console.log(e)
                } finally {
                    this.tableLoading = false;
                }
            },
            editStudent(data) {
                console.log(data);
                try {
                    this.studentData = data;
                    this.isOpenDialog(true, true);
                } catch (e) {
                    console.log(e);
                }
            },
            addStudent(data) {
                try {
                    this.studentData = data;
                    this.isOpenDialog(true, false);
                } catch (e) {
                    console.log(e);
                }
            },
            isOpenDialog(isOpen, isEdit) {
                this.isAdd = isOpen;
                this.isEdit = isEdit;
            },
            async getCollege() {
                const res = await college.fetchUserList();
                this.options = res.msg
            },
            async getClass() {
                const res = await classManage.fetchClassByCondition({});
                this.options2 = res.msg
            },
        },
        created() {
            this.height = window.innerHeight - 150;
            this.fetchAllClass();
            this.getCollege();
            this.getClass();
        }
    }
</script>

<style scoped>
    .wrapper {
        padding: 0 15px;
    }

    .tableSearch {
        width: 221px;
    }

    .tableSearch >>> .el-input__inner {
        border-radius: 415px;
    }

    .btn {
        margin-right: 7px;
    }
</style>